<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 15:55:55
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:09
-->
<template>
  <div class="apply">
    <div class="wrapper">
      <!-- 标题开始 -->
      <h2>{{ details.name }}</h2>
      <!-- 标题结束 -->
      <!-- 项目信息开始 -->
      <p>项目费用： {{ details.projectMoney }}元</p>
      <p>
        起止时间： {{ details.beginTime | fmtDate }} ~
        {{ details.endTime | fmtDate }}
      </p>
      <p>项目介绍： {{ details.introduce }}</p>
      <!-- 项目信息结束 -->
      <!-- 步骤条开始 -->
      <el-steps :active="1" align-center>
        <el-step
          title="申请报名"
          description="用户选择自己喜欢的项目进行报名"
        ></el-step>
        <el-step
          title="管理员确认"
          description="管理员确认用户报名，为用户开放账号"
        ></el-step>
        <el-step
          title="用户付款"
          description="用户登录后可以进行确认，完成付款"
        ></el-step>
        <el-step
          title="报名完成"
          description="报名接受后等待管理员线下通知"
        ></el-step>
      </el-steps>
      <!-- 步骤条结束 -->
      <!-- 表单开始 -->
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name" required>
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone" required>
            <el-input v-model="ruleForm.telephone"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="ruleForm.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-col :span="11">
              <el-form-item>
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.birth"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary" plain
              @click="submitForm('ruleForm')"
              style="margin-left: 40%"
              >确认报名</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 表单结束 -->
    </div>
    <div class="text" @click="toApplyQuery()">已报名？查看报名进度 >></div>
  </div>
</template>
<script>
import { get, post } from "../utils/request";
import moment from 'moment';
export default {
  data() {
    return {
      ruleForm: {},
      details: {},
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        telephone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
    };
  },
  methods: {
    toApplyQuery(){
      this.$router.push({path:'/applyQuery'})
    },
    // 提交报名信息
    submitForm() {
      // 将标准时间转化为时间戳
      this.ruleForm.birth = moment(this.ruleForm.birth).format('x');
      // 获取项目id
      this.ruleForm.projectId = this.$route.query.id;
      console.log(this.ruleForm);
      post("/index/apply/saveOrUpdate", this.ruleForm).then((res) => {
        // console.log(res);
        if ((res.status = 200)) {
          this.$message({
            type: "success",
            message: res.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    // 通过项目id查询项目详细信息
    findDetailsById() {
      // 数据交互
      get("/index/project/findById?id=" + this.$route.query.id).then((res) => {
        // console.log(res,'******');
        if (res.status == 200) {
          this.details = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
  },
  created() {
    // 拿到从上一个页面传过来的id值
    this.id = this.$route.query.id;
    this.findDetailsById();
  },
};
</script>
<style lang="scss" scope>
.text{
  margin-left: 47%;
  color: #0189ec;
}
.text:hover{
  color:aqua;
}
.wrapper {
  width: 908px;
  h2 {
    text-align: center;
  }
}
</style>